<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>20_template元素的使用</title>
  <!-- 
  在 Vue 中， `<template>`  元素是一个非常重要的概念，用于定义模板的结构和内容。它并不会直接渲染到页面上，而是作为一个容器，用于包裹其他元素或组件。
  1. 基本用法
  `<template>`  标签用于定义一段 HTML 结构，这段结构在 Vue 实例渲染时会被处理和替换。基本语法如下：
  <template>
    <div>
      <p>这是一个模板内容。</p>
    </div>
  </template>
  在这个例子中， `<template>`  包含了一段 HTML 结构，但它本身不会被渲染到 DOM 中。

  2. 用于条件渲染
  `<template>`  可以与条件渲染指令（如  `v-if` 、 `v-else-if` 、 `v-else` ）结合使用，以实现复杂的条件逻辑：
  <template>
    <div>
      <template v-if="isVisible">
        <p>内容可见</p>
      </template>
      <template v-else>
        <p>内容不可见</p>
      </template>
    </div>
  </template>
  在这个例子中，根据  `isVisible`  的值，渲染不同的内容。

  3. 用于循环渲染
  `<template>`  也可以与列表渲染指令  `v-for`  结合使用，以便在循环中使用多个元素：
  <template>
    <ul>
      <template v-for="item in items" :key="item.id">
        <li>{{ item.name }}</li>
      </template>
    </ul>
  </template>
  在这个例子中， `<template>`  标签用于包裹循环中的每个列表项。

  4. 组合多个元素
  `<template>`  可以用来组合多个元素，这些元素在某些情况下需要一起渲染，而不需要额外的 DOM 层级：
  <template>
    <div>
      <h1>标题</h1>
      <p>这是一些描述文字。</p>
    </div>
  </template>
  在这个例子中， `<template>`  作为一个容器，包裹了多个元素。

  5. 注意事项
  - 不渲染到 DOM： `<template>`  标签本身不会渲染到最终的 DOM 中，所有的内容都在 Vue 实例处理后被替换。
  - 嵌套使用：可以在  `<template>`  中嵌套使用其他  `<template>`  标签，以实现更复杂的结构。

  总结
  -  `<template>`  元素：用于定义一段 HTML 结构，作为容器，不会直接渲染到 DOM 中。
  - 条件渲染：可以与  `v-if` 、 `v-else-if`  和  `v-else`  结合使用，实现条件逻辑。
  - 循环渲染：可与  `v-for`  指令结合使用，便于在循环中使用多个元素。
  - 组合多个元素：用于组合多个元素，避免额外的 DOM 层级。
  通过合理使用  `<template>`  元素，开发者可以灵活地控制 Vue 应用的结构和内容，提高代码的可读性和可维护性。
  -->
</head>
<body>

  <div id="app">
    <!-- v-if条件 -->
    <h3>1. template v-if条件</h3>
    <template v-if="Object.keys(info).length">
      <p>姓名: {{info.name}}</p>
      <p>年龄: {{info.age}}</p>
    </template>
    <template v-else>
      <h2>没有输入个人信息</h2>
      <p>请输入个人信息后, 再进行展示~</p>
    </template>

    <h3>2. template v-if切换</h3>
    <template v-if="isShowCode">
      <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/wzry_qrcode.jpg" alt="">
    </template>
    <div>
      <button @click="isShowCode = !isShowCode">切换</button>
    </div>
  </div>

  <script src="../lib/vue.js"></script>

  <script>
    const { createApp, ref } = Vue

    const app = createApp({
      setup() {
        const info = ref({
          name: "template-name",
          age: 18
        })

        const isShowCode = ref(false)

        return {
          info,
          isShowCode
        }
      }
    })

    app.mount('#app')
   
  </script>
  
</body>
</html>